<template>
  <view class="family-container">
    <!-- 添加成员按钮 -->
    <view class="add-member" @tap="addMember">
      <view class="add-icon">+</view>
      <view class="add-text">
        <view class="title">添加家庭成员</view>
        <view class="subtitle">最多可添加{{ state.maxMembers }}位家人</view>
      </view>
    </view>

    <!-- 成员列表 -->
    <view class="member-list">
      <view
        class="member-item"
        v-for="(item, index) in state.memberList"
        :key="index"
        @touchstart="(e) => touchStart(e, index)"
        @touchmove="touchMove"
        @touchend="touchEnd"
        :style="{ transform: `translateX(${item.offset}px)` }"
      >
        <img src="../../static/personHead.png" class="member-avatar" />
        <view class="member-info">
          <view class="name">{{ item.family_person_name }}</view>
          <view class="tag">{{
            getOptionLabel(item.family_person_type, state.relationList)
          }}</view>
          <view class="phone">{{ item.family_person_phone }}</view>
        </view>
        <view class="arrow">></view>
        <view class="delete-btn" @tap="deleteMember(item._id)">
          <img src="/static/del.png" class="deleteIcon" alt="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive } from "vue";
import { onShow } from '@dcloudio/uni-app';
import { request, getOptionLabel } from "../../js/util.js";

const state = reactive({
  memberList: [],
  startX: 0,
  currentIndex: -1,
  deleteWidth: -120,
  maxMembers: 10,
  relationList: [
    { label: "本人", value: 0 },
    { label: "配偶", value: 1 },
    { label: "父母", value: 2 },
    { label: "兄弟姐妹", value: 3 },
    { label: "祖父母/外祖父母", value: 4 },
    { label: "孙子/外孙", value: 5 },
    { label: "子女/儿媳", value: 6 },
    { label: "其他", value: 7 },
  ],
});

// 获取家庭成员列表
const getMemberList = async () => {
  const userId = uni.getStorageSync("userid");
  let submitData = {
    condition: {
      belong_user_id: userId,
    },
  };
  const res = await request("selectFamily", submitData);

  if (res.status) {
    state.memberList = res.result.map((member) => ({
      ...member,
      offset: 0, // 添加滑动偏移量属性
    }));
  } else {
    uni.showToast({
      title: res.data.msg || "获取家庭成员失败",
      icon: "none",
    });
  }
};

// 添加家庭成员
const addMember = () => {
  if (state.memberList.length >= state.maxMembers) {
    uni.showToast({
      title: `最多只能添加${state.maxMembers}位家人`,
      icon: "none",
    });
    return;
  }

  uni.navigateTo({
    url: "/pages/addMember/addMember",
  });
};

// 触摸开始
const touchStart = (e, index) => {
  state.startX = e.touches[0].clientX;
  state.currentIndex = index;
};

// 触摸移动
const touchMove = (e) => {
  if (state.currentIndex === -1) return;

  const moveX = e.touches[0].clientX - state.startX;
  let offset = moveX;

  // 限制左滑距离
  if (offset < state.deleteWidth) {
    offset = state.deleteWidth;
  }
  // 限制右滑
  if (offset > 0) {
    offset = 0;
  }

  state.memberList[state.currentIndex].offset = offset;
};

// 触摸结束
const touchEnd = () => {
  if (state.currentIndex === -1) return;

  const currentOffset = state.memberList[state.currentIndex].offset;
  // 如果滑动超过删除按钮宽度的一半，则完全显示删除按钮
  if (currentOffset < state.deleteWidth / 2) {
    state.memberList[state.currentIndex].offset = state.deleteWidth;
  } else {
    state.memberList[state.currentIndex].offset = 0;
  }

  state.currentIndex = -1;
};

// 删除成员
const deleteMember = async (id) => {
  try {
    const res = await request("deleteFamily", { deleteId: id });

    if (res.status) {
      getMemberList();
      uni.showToast({
        title: "删除成功",
        icon: "success",
      });
    } else {
      uni.showToast({
        title: res.data.msg || "删除失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("删除家庭成员错误:", error);
    uni.showToast({
      title: "网络异常，请稍后重试",
      icon: "none",
    });
  }
};

onShow(() => {
  getMemberList();
});
</script>

<style lang="scss">
.family-container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 100vh;

  .add-member {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .add-icon {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      border: 2rpx dashed #ff5555;
      color: #ff5555;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      margin-right: 20rpx;
    }

    .add-text {
      .title {
        font-size: 32rpx;
        color: #ff5555;
        margin-bottom: 6rpx;
      }
      .subtitle {
        font-size: 24rpx;
        color: #fa9797;
      }
    }
  }

  .member-list {
    // background: #fff;
    border-radius: 12rpx;
    overflow: hidden;

    .member-item {
      background: #fff;
      padding: 40rpx 30rpx;
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
      border-radius: 12rpx;
      transition: transform 0.3s ease;

      &:last-child {
        margin-bottom: 0;
      }

      .member-avatar {
        width: 80rpx;
        height: 80rpx;
        background: #eee;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .member-info {
        flex: 1;

        .name {
          font-size: 32rpx;
          color: #333;
          display: inline-block;
          margin-right: 20rpx;
          vertical-align: middle;
        }

        .tag {
          display: inline-block;
          font-size: 24rpx;
          color: #ff5555;
          background: rgba(255, 85, 85, 0.1);
          padding: 2rpx 12rpx;
          border-radius: 4rpx;
          margin-bottom: 6rpx;
          vertical-align: middle;

          &.tag-brother,
          &.tag-mother {
            color: #ff5555;
            background: rgba(255, 85, 85, 0.1);
          }
        }

        .phone {
          font-size: 26rpx;
          color: #999;
        }
      }

      .arrow {
        color: #ccc;
        font-size: 32rpx;
      }

      .delete-btn {
        position: absolute;
        right: -200rpx; // 调整位置，给圆形按钮留出空间
        top: 50%;
        transform: translateY(-50%); // 垂直居中
        width: 150rpx;
        height: 150rpx; // 设置相同的宽高实现圆形
        background: #ff5555;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%; // 圆形
        font-size: 40rpx;
        .deleteIcon {
          width: 80rpx;
          height: 80rpx;
        }
        // &::before {  // 使用伪元素添加垃圾桶图标
        // 	content: '\e6cf';  // 这里使用的是示例 unicode，请替换成你实际使用的图标
        // 	font-family: "uniicons";  // 使用 uni-app 的图标字体
        // }
      }
    }
  }
}
</style>
